import React from "react";
import "./App.css";
import proptypes from "proptypes";
import classNames from "classnames/bind";
import sonStyle from "./Son.module.css";
//使用classnames库,来处理多个class动态增减的问题

//要配合模块化 就要
let bindClassnames = classNames.bind(sonStyle);

class Son extends React.PureComponent {
  constructor(props) {
    super(props);
  }
  state = {
    isShow: true,
  };
  changeClassname = () => {
    this.setState({
      isShow: !this.state.isShow,
    });
  };

  render() {
    return (
      <div>
        <hr />
        <h4> 动态增减classname</h4>
        <div
          className={bindClassnames({
            son: true,
            son1: this.state.isShow,
          })}
          onClick={this.changeClassname}
        >
          动态增减classname
        </div>
        <hr />
        <div>
          <div>获取到的message数据：{this.props.message}</div>
          <button
            onClick={() => {
              this.props.changeMessage("子组件修改后的message数据");
            }}
          >
            修改message数据
          </button>
        </div>

        <h1>Hi, I am Son</h1>
        <div>React中的prop的类型验证必须得自己写</div>
        <div className="code-block">
          {`
          // prop 验证方法
Son.propTypes = {
 // 1.必须自己手动写类型验证方法
  // message: (props) => {
  //   if (typeof props.message !== "string") {
  //     throw new Error("message must be a string");
  //   }
  // },
  // 2.可以通过引入 propTypes 库 进行验证
  message: proptypes.string,
};
//prop 默认值
Son.defaultProps = {
  message: "默认值",
}
`}
          <hr />
          vue中的slot插槽直接通过 this.props.children来进行渲染
          <div>插槽内容</div>
          {this.props.children}
          <div>作用域插槽</div>
          {this.props.slotContent("子组件传递的插槽内容")}
          <hr />
          <div>兄弟组件传值，向父组件传值，父组件传递</div>
          <button
            onClick={() => this.props.propMessage("son子组件向son2组件传值")}
          >
            我要向son2组件传值
          </button>
        </div>
      </div>
    );
  }
}
// prop 验证方法
Son.propTypes = {
  // 1.必须自己手动写类型验证方法 ，可以通过引入 propTypes 库 进行验证
  // message: (props) => {
  //   if (typeof props.message !== "string") {
  //     throw new Error("message must be a string");
  //   }
  // },
  // 2.可以通过引入 propTypes 库 进行验证
  message: proptypes.string,
};
//prop 默认值
Son.defaultProps = {
  message: "默认值",
};
export default Son;
